<template>
  <div>
    <view class="empty-car" v-if="isEmpty">
      <image src="/static/img/kong.png"></image>
      <text class="empty-car-tips">购物车还是空的</text>
      <text class="empty-car-tips extra">快去逛逛吧~</text>
    </view>
    <view v-else>
      <!-- 头部 -->
      <view class="shop-head">
        <view class="shop-head-info">
          <view class="iconfont icon-shop flex-center icon-dianpu"></view>
          <text class="shop-name">品优购生活馆</text>
        </view>
      </view>
      <!-- 列表 -->
      <block v-for="item in goodsList" :key="item.goods_id">
        <view class="goods-item">
            <!-- 左边选中的图标 -->
            <view @click="toggleSelect(item)" :class="['pubIcon',item.isSelect ? 'trueIcon' : 'falseIcon']"></view>
            <!-- 中间的图片 -->
            <view class="goods-item-pic">
              <image :src="item.goods_small_logo"/>
            </view>
            <!-- 右边的商品信息 -->
            <view class="goods-item-info">
              <text class="goods-item-info-title">{{item.goods_name}}</text>
              <text class="goods-item-info-price">￥{{item.goods_price}}</text>
              <view class="goods-item-info-edit">
                <view class="outer">
                  <view :style="{'color':item.goods_number == 1 ? '#ccc' : 'black'}" @click="substrict(item)">-</view>
                  <view class="value">
                    <input
                      style="font-size:12px;color:#999;"
                      v-model="item.goods_number"
                      @input="changeValue(item)"
                      type="number"
                    /></view>
                  <view @click="add(item)" class="add">+</view>
                </view>
                <text @click="deleteGoods(item)">| 删除</text>
              </view>
          </view>
        </view>
      </block>
      <!-- 工具条 -->
      <view class="fixed-bar">
        <view @click="toggleAllSelect" class="allselect">
          <!-- 左边选中的图标 -->
          <view :class="['pubIcon',allSelected ? 'trueIcon' : 'falseIcon']"></view>
          <text style="margin-left:10rpx;color:#999;">全选</text>
        </view>
        <view class="statistics">
          <view>
            <text>合计：</text>
            <text style="color:#ff2d4a;font-size:30rpx;">￥{{totalPrice}}</text>
          </view>
          <view>
            <text>包含运费</text>
          </view>
        </view>
        <view @click="goToOrderAndPay" :class="['jiesuan',totalCount === 0 ? 'disabled':'']">
          <text>去结算 ({{totalCount}})</text>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import {getLocalGoods,updateGoods,deleteGoods} from '../../common/cart'
export default {
  data(){
    return {
      isEmpty:true, // 判断是否有数据
      allSelected:true, //全选
      goodsList:[] // 商品列表
    }
  },
  computed: {
    // 总价格
    totalPrice(){
      let totalPrice = 0
      this.goodsList.forEach(item => {
        if (item.isSelect) {
          totalPrice += item.goods_number * item.goods_price
        }
      })
      return totalPrice
    },
    // 总数量
    totalCount(){
      let totalCount = 0
      this.goodsList.forEach(item => {
        if (item.isSelect) {
          totalCount += item.goods_number
        }
      })
      return totalCount
    }
  },
  onShow(){
    this.getGoodsListData()
  },
  methods:{
    async getGoodsListData(){
      // 拿到本地的商品信息
      const localGoods = getLocalGoods()

      const ids = Object.keys(localGoods)
      if (ids.length === 0){
        this.isEmpty = true
        return
      }

      this.isEmpty = false

      // 发送请求
      const res = await this.$axios.get(`goods/goodslist?goods_ids=${ids.join(',')}`)

      // 一定要先把数据处理好，然后再赋值
      res.data.message.forEach(item => {
        item.goods_number = localGoods[item.goods_id]
        item.isSelect = true
      })

      this.goodsList = res.data.message
    },
    // 全选 & 反选
    toggleAllSelect(){
      // 自身取反
      this.allSelected = !this.allSelected
      // 让数组中的每一项，跟我现在的状态保持一致
      this.goodsList.forEach(item => {
        item.isSelect = this.allSelected
      })
    },
    // 选择 & 反选
    toggleSelect(item){
      // 自身取反
      item.isSelect = !item.isSelect

      // 实现下面全选和反选按钮的选中
      let allSelected = true
      this.goodsList.some(item => {
        if(!item.isSelect){
          allSelected = false

          return true
        }
      })

      this.allSelected = allSelected
    },
    // 商品数据量减
    substrict(item){
      if (item.goods_number <=1) return
      item.goods_number--

      updateGoods(item)
    },
    add(item){
      item.goods_number++

      updateGoods(item)
    },
    changeValue(item){
      if (item.goods_number){
        item.goods_number = parseInt(item.goods_number)
        if (item.goods_number <= 0){
          item.goods_number = 1
        }

        updateGoods(item)
      }
    },
    // 删除商品
    deleteGoods(item){
      mpvue.showModal({
        title: '提示', //提示的标题,
        content: '是否删除该商品', //提示的内容,
        showCancel: true, //是否显示取消按钮,
        cancelText: '取消', //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: '#000000', //取消按钮的文字颜色,
        confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: '#ff2d4a', //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            // 删除本地的goodsList中对应的数据
            const deleteIndex = this.goodsList.findIndex(val => val.goods_id === item.goods_id)

            this.goodsList.splice(deleteIndex,1)

            // 删除storage的数据
            deleteGoods(item.goods_id)

            // 判断是否还要数据
            this.isEmpty = this.goodsList.length === 0
          }
        }
      });
    },
    // 去到支付页面
    goToOrderAndPay(){
      // 1 获取用户选中的商品，并且把选中的商品id携带过去
      const ids = []
      this.goodsList.forEach(item => {
        if (item.isSelect){
          ids.push(item.goods_id)
        }
      })

      if (ids.length === 0){
        mpvue.showToast({
          title: '请选择商品结算', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => {}
        });
        return
      }

      // 编程式导航
      mpvue.navigateTo({ url: '/pages/pay/main?ids='+ids.join(',') })
    }
  }
}
</script>

<style lang="less" scoped>
@PADDING-LEFT: 20rpx;
.empty-car {
  display: flex;
  flex-direction: column;
  height: 500rpx;
  justify-content: center;
  align-items: center;
  image {
    width: 125rpx;
    height: 124rpx;
  }
  &-tips {
    margin-top: 30rpx;
    font-size: 28rpx;
    color: #666;
  }
}
.extra {
  font-size: 24rpx;
  color: #999;
}
.shop-head {
  background-color: #fff;
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 @PADDING-LEFT;
  border-bottom: 1px solid #ddd;
  &-info {
    display: flex;
    align-items: center;
    .shop-name {
      margin-left: 10rpx;
    }
  }
}
.goods-item {
  height: 220rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: @PADDING-LEFT;
  border-bottom: 1px solid #eee;
  &-pic {
    width: 160rpx;
    height: 160rpx;
    margin-left: 10rpx;
    border: 1px solid #ddd;
    padding: 10rpx;
    border-radius: 5rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  &-info {
    flex: 1;
    height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0rpx @PADDING-LEFT;
    &-title {
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    &-price {
      color: #ff2d4a;
      font-size: 30rpx;
    }
    &-edit {
      display: flex;
      justify-content: space-between;
      .outer {
        border: 1px solid #ddd;
        display: flex;
        align-items: center;
        border-radius: 5rpx;
        view {
          height: 50rpx;
          width: 50rpx;
          line-height: 50rpx;
          text-align: center;
        }
        .value {
          width: 65rpx;
          border-left: 1px solid #ddd;
        }
        .add {
          border-left: 1px solid #ddd;
        }
      }
    }
  }
}
.pubIcon {
  background: url(https://mcart.jiuxian.com/statics/images/cart/catIcon.png)
    no-repeat 0 0;
  background-size: 300rpx 300rpx;
  width: 55rpx;
  height: 55rpx;
}
.trueIcon {
  background-position: 0 -225rpx;
}
.falseIcon {
  background-position: -50rpx -225rpx;
}
.fixed-bar {
  display: flex;
  height: 98rpx;
  width: 750rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  .allselect {
    padding-left: @PADDING-LEFT;
    width: 200rpx;
    height: 98rpx;
    display: flex;
    align-items: center;
  }
  .statistics {
    flex: 1;
    display: flex;
    // align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .jiesuan {
    width: 200rpx;
    height: 98rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff2d4a;
    text {
      color: #fff;
    }
  }

  .disabled {
    background-color: #ddd;
  }
}
</style>

